<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>04-通过计算属性实现案例</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div class="container" style="width: 300px;">
            <h3>搜索数据</h3>
            <hr>
            <input type="text" class="form-control" v-model="val">
            <table class="table">
                <tr v-for="(item, index) in newArr">
                    <td>{{ index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                val: '',
                arr: [
                    { id: 1, name: '德玛', age: 20 },
                    { id: 2, name: '德玛皇子', age: 20 },
                    { id: 3, name: '探险家', age: 21 },
                    { id: 4, name: '大发明家', age: 40 },
                    { id: 5, name: '维克多', age: 60 }
                ]
            },
            computed: {
                newArr() {
                    return this.arr.filter(item => item.name.includes(this.val))
                }
            }
        })
    </script>
</body>
</html>